<template>
  <div
    class="min-h-screen transition-all duration-300"
    :class="[
      $colorMode.value === 'dark'
        ? 'bg-gradient-to-br from-bg-primary via-bg-secondary to-bg-tertiary'
        : 'bg-gradient-to-br from-gray-50 via-white to-gray-100',
    ]"
  >
    <!-- 主导航 -->
    <MainNavigation />

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 py-8 pt-24 min-h-[calc(100vh-140px)]">
      <slot />
    </main>

    <!-- 页脚 -->
    <AppFooter />
  </div>
</template>

<script setup>
// 页面元数据
useHead({
  htmlAttrs: {
    lang: 'zh-CN',
  },
  link: [
    {
      rel: 'preconnect',
      href: 'https://fonts.googleapis.com',
    },
    {
      rel: 'preconnect',
      href: 'https://fonts.gstatic.com',
      crossorigin: '',
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap',
    },
  ],
})
</script>

<style scoped>
/* 布局特定样式 */
.container {
  max-width: 1200px;
}

@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
</style>
